<template>
  <div class="boxs">
    <div class="f2">
      <!-- 身份证正反面 -->
      <div class="license" style="margin-top: 0.1823rem">
        <div style="display: flex; margin-left: -30px">
          <span class="bbb"><span style="color: #f00">*</span> 上传票面信息</span>
          <!-- 正面 -->
          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-front"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeFront"
            :http-request="uploadFileFront"
            ref="pictureUpload1"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove1(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- 反面 -->

          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-reverse"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeReverse"
            :http-request="uploadFileReverse"
            ref="pictureUpload2"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove2(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- --------------------------------------------------- -->
          <div class="license-right card-right">
            <div>
              <p>说明：</p>
              <p>1.确保商票图像完整清晰；</p>
              <p>2.上传文件大小不超过5M；</p>
              <p>3.仅支持bmp、jpeg、png、jpg格式文件。</p>
              <el-popover placement="top-start" trigger="hover">
                <div v-viewer>
                  <img
                    style="width: 45px; height: 45px"
                    src="http://operate.thunlink.cn/protocol/image/u185.png"
                    alt=""
                  />
                  <img
                    style="width: 45px; height: 45px; margin-left: 10px"
                    src="http://operate.thunlink.cn/protocol/image/u186.png"
                    alt=""
                  />
                </div>
                <p slot="reference" class="examine">查看示例</p>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      <ul>
        <li>
          <el-form ref="ruleForm1" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="票据号码" prop="a">
              <el-input type="string" v-model="form.a" />
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm2" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="票面金额" prop="b">
              <el-input
                @blur="costChangeB"
                @focus="
                  () => {
                    this.form.b = remoney(this.form.b)
                  }
                "
                @input="limitInput($event, 'b')"
                v-model="form.b"
                placeholder=""
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 0.0521rem;
                  top: 0px;
                  z-index: 99;
                  font-size: 0.0938rem;
                  color: #3f6ef2;
                "
              >
                元
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm3" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="承兑人名称" prop="c">
              <el-input v-model="form.c" placeholder=""></el-input>
            </el-form-item>
          </el-form>
          <el-form
            class="aaaaa"
            ref="ruleForm4"
            :model="form"
            label-width="1.0417rem"
            :rules="rules"
          >
            <el-form-item label="票据到期日" prop="d">
              <el-date-picker
                :clearable="false"
                v-model="form.d"
                type="date"
                placeholder=""
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <p
                style="
                  position: absolute;
                  right: 0.0521rem;
                  top: 0px;
                  z-index: 99;
                  font-size: 0.0833rem;
                "
              >
                <img style="width: 0.1146rem" src="@/assets/shangpiao/日历.png" alt="" />
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm5" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="承兑人银行账号" prop="e">
              <el-input v-model="form.e" placeholder=""></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm6" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="承兑人开户行行号" prop="f">
              <el-input v-model="form.f" placeholder=""></el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form label-width="1.0417rem" :rules="rules">
            <el-form-item label="附件" prop="g">
              <el-input style="visibility: hidden"></el-input>
              <div class="f2_content" style="visibility: hidden">
                <div class="license1"></div>
              </div>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label=" " prop="">
              <el-input style="visibility: hidden"></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <!-- 合同上传 -->
      <div style="display: flex; justify-content: center; margin-bottom: 30px">
        <div id="datatable">
          <el-table
            :data="fileList"
            border
            style="width: 100%"
            stripe
            :header-cell-style="{
              background: '#F1F5FF',
              color: '#4D4D4D'
            }"
          >
            <el-table-column label="序号" prop="number" min-width="8%" align="center">
            </el-table-column>
            <el-table-column prop="name" label="文件名称" align="center" min-width="25%">
            </el-table-column>
            <el-table-column prop="yszkje" label="上传状态" min-width="25%" align="center">
            </el-table-column>
            <el-table-column prop="upDate" label="上传日期" min-width="15%" align="center">
              <template slot-scope="scope">
                {{ scope.row.upDate | getDate }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              min-width="15%"
            >
              <template slot-scope="scope">
                <span class="span" type="text" size="small">
                  <el-upload
                    class="upload"
                    ref="upload"
                    action="string"
                    :name="num"
                    :auto-upload="false"
                    :on-preview="handlePreview"
                    :http-request="uploadFile"
                    :on-change="handleChange"
                    :file-list="fileFormList"
                  >
                    <span
                      @click="aaa(scope.$index)"
                      class="file"
                      slot="trigger"
                      size="small"
                      type="primary"
                      >上传</span
                    >
                  </el-upload>
                </span>
                <span
                  v-show="fileList[scope.$index].yszkje == '已上传'"
                  class="span"
                  @click="examine(scope.$index, fileList)"
                  >查看</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          :src="require(`@/assets/shangpiao/组${radio ? '38' : '39'}.png`)"
          alt=""
        />
        <span> 阅读并同意 </span>
        <a
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          >《企业授权协议》、</a
        >
        <a
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          >《技术服务协议》</a
        >
      </div>
      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <!-- <div class="btn btn1" @click="goLast()">上一步</div> -->
        <!-- <div class="btn btn2" @click="save()">保存</div> -->
        <el-tooltip placement="top" v-if="!btn">
          <div slot="content">请勾选授权协议<br />确认填写的信息是否完整</div>
          <button
            class="btn btn3"
            v-bind:class="{
              active: btn & radio,
              actives: submitMessage == '提交中'
            }"
            @click="submit()"
          >
            {{ submitMessage }}
          </button>
        </el-tooltip>
        <button
          v-else
          class="btn btn3"
          v-bind:class="{
            active: btn & radio,
            actives: submitMessage == '提交中'
          }"
          @click="submit()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
    <!-- 查看票据正反面信息 -->
    <el-dialog title="票据示例" :visible.sync="contractCardbackVisible" width="35%" center>
      <!-- 内容区域 -->
      <div
        v-viewer
        v-if="1 > 0"
        style="text-align: center; width: 300px; height: 300px; z-index: 998"
        class="dialog-centers"
        @click="contractCardbackVisible = false"
      >
        <img
          style="width: 100%; height: 100%; margin-bottom: 15px; z-index: 998"
          src="../../../../public/img/u185.png"
          alt=""
        />
        <img
          style="width: 100%; height: 100%; z-index: 998"
          src="../../../../public/img/u186.png"
          alt=""
        />
        <p style="margin-top: 20px">点击图片可查看大图</p>
      </div>
      <div v-else style="text-align: center; margin-bottom: 30px" class="dialog-centers">
        <h4>暂无详细资料</h4>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="contractCardbackVisible = false">
          取 消
        </button>
        <button class="dialog-footer-bnt btn2" @click="contractCardbackVisible = false">
          确 定
        </button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <!-- 弹窗 -->
    <!--签署协议弹窗开始 -->
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      :visible.sync="showAgreementVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center" v-loading="loading">
        <template v-if="list">
          <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in list" :key="item.url" :label="item.name" :name="item.names">
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="item.url"
                ></iframe>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          v-if="contractStatuss"
          :disabled="isLock"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button v-else :disabled="isLock" class="dialog-footer-bnt btn2" @click="sign">
          去签署
        </button>
      </div>
    </el-dialog>
    <!-- 签署协议弹窗结束 -->
    <!--签署协议提示开始 -->
    <el-dialog
      class="hint"
      :closeOnClickModal="false"
      title="合同签署"
      :visible.sync="hintVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center-hint">
        <p>
          签署短信已发送至经办人手机{{ operatetel | getPhone }}、法定代表人手机{{
            officertel | getPhone
          }}，请点击短信签署链接完成签署操作。
        </p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          style="background: #fff; color: #3f6ef2"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button
          v-bind:class="{ actives: submitMessage == '提交中' }"
          class="dialog-footer-bnt btn2"
          @click="submit"
        >
          {{ submitMessage }}
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { base, Contracts, createContractReview, Contract, updateapplyid } from '@/utils'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      btnStatus: false,
      num: '1',
      fileFormList: [],
      fileTypes: [],
      files: [],
      fileList: [
        {
          number: 1,
          name: '贸易合同',
          yszkje: '未上传',
          upDate: ''
        },
        {
          number: 2,
          name: '发票',
          yszkje: '未上传',
          upDate: ''
        }
      ],
      submitMessage: '提交',
      contractStatuss: true, //签署状态
      isLock: false,
      QYSQreportUrl: '',
      JSFWreportUrl: '',
      activeName: 'first', //标签页默认
      loading: false,
      dialogImageUrl: '',
      flowId: '',
      dialogVisible: false,
      disabled: false,
      imgUrl: '',
      list: null,
      dialogVisible: false,
      dialogUrl: '',
      contractCardbackVisible: false,
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      radio: false, //企业授权服务状态变量
      btn: false,
      fileListFront: [],
      fileListReverse: [],
      officertel: '', //法人手机号
      operatetel: '', //经办人手机号
      form: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        g: '',
        acceptorAccountBank: '', //承兑人开户行名称
        issueDate: '', //出票日期
        issuerName: '', //出票人名称
        acceptanceDate: '', //承兑日期
        draftStatus: '' //票据状态
      },
      // 用户填写资料表格
      addform: {
        b: ''
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: ' ', trigger: 'blur' }],
        b: [{ required: true, message: ' ', trigger: 'blur' }],
        c: [{ required: true, message: ' ', trigger: 'blur' }],
        d: [{ required: true, message: ' ', trigger: 'blur' }],
        e: [{ required: true, message: ' ', trigger: 'blur' }],
        f: [{ required: true, message: ' ', trigger: 'blur' }],
        g: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      // 合同签署数据
      contract: {
        applyid: '',
        entname: '',
        FRaccountid: '',
        inputdate: '',
        JBRaccountid: '',
        licenseno: '',
        mainindname: '',
        officer: '',
        officertel: '',
        ORGaccountid: '',
        productcode: '',
        radio: '',
        ticketadder: '',
        ticketbank: '',
        ticketbankno: '',
        tickethead: '',
        ticketno: '',
        tickettel: '',
        acceptor: '', //承兑人
        step: 'apply'
      }
    }
  },
  // 过滤器
  filters: {
    // 手机号脱敏
    getPhone: function (value) {
      if (!value) return value
      value = value.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
      return value
    },
    getDate: function (value) {
      if (!value) return '-'
      let date = value.split(' ')[0]
      return date
    }
  },
  // 监听器
  watch: {
    files() {
      this.submitBtns()
    },
    fileListFront() {
      if (this.fileListFront.length == 0) return
      this.submitBtns()
      let formData = new FormData()
      formData.append('file', this.fileListFront)
      let token = sessionStorage.getItem('token')
      let url = base + '/api/BusinessSPs/ocr'
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 100) {
            let bankCard = res.data.data.ticketdata
            this.form.a = bankCard.draftNumber
            this.form.c = bankCard.acceptorName
            this.form.d = this.formatDate(bankCard.validToDate)
            this.form.e = bankCard.acceptorAccountNumber
            this.form.f = bankCard.acceptorBankNumber
            this.form.acceptorAccountBank = bankCard.acceptorAccountBank
            this.form.issueDate = bankCard.issueDate
            this.form.issuerName = bankCard.issuerName
            this.form.acceptanceDate = bankCard.acceptanceDate
            this.form.draftStatus = bankCard.draftStatus
            // this.bankCard.serialno = res.data.data.fileId;
            if (parseInt(Number(bankCard.totalAmount), 10) != Number(bankCard.totalAmount)) {
              this.form.b = Number(bankCard.totalAmount).toLocaleString()
            } else {
              this.form.b = Number(bankCard.totalAmount).toLocaleString() + '.00'
            }
            this.addform.b = bankCard.totalAmount
            this.submitBtns()
          } else {
            this.$Message.error('OCR识别失败')
          }
        })
    },
    fileListReverse() {
      this.submitBtns()
    }
  },
  // 计算属性
  computed: {
    ...mapState(['shangPiaoApplyParameter'])
  },
  methods: {
    // 格式化时间
    formatDate(date) {
      if (date.split('-').length != 1) return date
      let year = date.slice(0, 4)
      let month = date.slice(4, 6)
      let d = date.slice(6, 8)
      return year + '-' + month + '-' + d
    },
    // 点击确认按钮
    async submit() {
      if (!this.btn) return
      if (this.submitMessage == '提交中') return
      if (
        (this.form.a != '') &
        (this.form.b != '') &
        (this.form.c != '') &
        (this.form.d != '') &
        (this.form.e != '') &
        (this.form.f != '') &
        this.radio &
        (this.fileListFront.length != 0) &
        (this.fileListReverse.length != 0)
      ) {
        if (
          !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListFront.name) ||
          !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListReverse.name)
        ) {
          this.$Message.warning('暂不支持上传该格式文件')
          return
        }
        this.submitMessage = '提交中'
        let formData = new FormData()
        this.files.forEach((file, index) => {
          formData.append('file', file)
          formData.append('fileTypes', this.fileTypes[index])
        })
        let token = sessionStorage.getItem('token')
        let {
          a,
          c,
          d,
          e,
          f,
          acceptorAccountBank,
          issueDate,
          issuerName,
          acceptanceDate,
          draftStatus
        } = this.form
        let { b } = this.addform
        let url =
          base +
          `/api/pros/AddputoutsSPBT?billnumber=${a}&faceamount=${b}&acceptorname=${c}&billdate=${d}&acceptorbank=${f}&acceptorbanking=${e}&acceptorAccountBank=${acceptorAccountBank}&issuedate=${issueDate}&issuername=${issuerName}&acceptancedate=${acceptanceDate}&draftstatus=${draftStatus}&productcode=${localStorage.getItem(
            'productcode'
          )}&productname=${localStorage.getItem('productname')}&productid=${localStorage.getItem(
            'id'
          )}&coopid=${localStorage.getItem('coopid')}`
        this.axios
          .post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
          })
          .then(async res => {
            if (res.data.msg != 'ok') {
              this.$Message.error('提交失败，请检查申请信息')
              this.submitMessage = '提交'
              return
            }
            await updateapplyid(res.data.data.businessPutout.id, this.flowId)
            if ('businessApply' in res.data.data) {
              localStorage.setItem('status', res.data.data.businessApply.status)
            } else {
              localStorage.setItem('status', '用信')
            }
            this.$router.push(`/cyedApplication3`)
            this.hintVisible = false
            setTimeout(() => {
              this.submitMessage = '提交'
            }, 3000)
          })
          .catch(err => {
            this.$Message.error('文件上传失败，请检查文件信息')
            this.submitMessage = '提交'
          })
      } else {
        this.$Message.error('请填写/上传申请信息/文件')
      }
    },
    //点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileListFront = []
      this.fileListReverse = []
    },
    handleChangeFront(file, fileList) {
      this.fileListFront = fileList[0].raw
      this.files.push(file.raw)
      this.fileTypes.push('piaojuz')
    },
    //自定义上传文件
    uploadFileFront(file) {},
    // 反面——————————————————————————————————————————————————————————
    handleChangeReverse(file, fileList) {
      this.fileListReverse = fileList[0].raw

      this.files.push(file.raw)
      this.fileTypes.push('piaojuf')

      this.submitBtns()
    },
    //自定义上传文件
    uploadFileReverse(file) {},
    // 点击上一步
    goLast() {
      this.$router.go(-1)
    },
    // 表格文件上传
    aaa(index) {
      this.num = index + ''
      if (index == 0) {
        let i0 = this.fileTypes.findIndex(element => element === 'BusinessContract')
        if (i0 == -1) return
        this.fileTypes.splice(i0, 1)
        this.files.splice(i0, 1)
      } else if (index == 1) {
        let i1 = this.fileTypes.findIndex(element => element === 'BusinessInvoice')
        if (i1 == -1) return
        this.fileTypes.splice(i1, 1)
        this.files.splice(i1, 1)
      }
    },
    // 查看
    examine(index, data) {
      if (data[index].yszkje == '未上传') return
      let val = data[index]
      let name = val.filetype.split('.')[1]
      let imgUrlStr = val.path
      if (name == 'jpg' || name == 'png') {
        const a = document.createElement('a') // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
        a.setAttribute('target', '_blank')
        a.href = val.path
        a.click()
      } else {
        fetch(imgUrlStr).then(res =>
          res.blob().then(blob => {
            const a = document.createElement('a'), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = val.name
            a.href = url
            a.download = filename
            a.click()
            window.URL.revokeObjectURL(url)
          })
        )
      }
    },

    // 文件上传
    handleChange(file, fileList) {
      if (!file.url) {
        file.url = URL.createObjectURL(file.raw)
      }
      let index = this.$refs.upload.name
      let date = new Date()
      let upDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      if (index == 0) {
        this.files.push(file.raw)
        this.fileTypes.push('BusinessContract')
        this.fileList[index].yszkje = '已上传'
        this.fileList[index].path = file.url
        this.fileList[index].filetype = file.name
        this.fileList[index].upDate = upDate
      } else if (index == 1) {
        this.files.push(file.raw)
        this.fileTypes.push('BusinessInvoice')
        this.fileList[index].yszkje = '已上传'
        this.fileList[index].path = file.url
        this.fileList[index].filetype = file.name
        this.fileList[index].upDate = upDate
      }
    },
    //自定义上传文件
    uploadFile(file) {},
    handlePreview(file) {},
    // 点击查看示例，查看票就正反面信息
    examineBll() {
      let list = [
        { path: 'http://operate.thunlink.cn/protocol/image/u185.png' },
        { path: 'http://operate.thunlink.cn/protocol/image/u186.png' }
      ]
      let fileUrl = null
      for (let i = 0; i < list.length; i++) {
        fileUrl = list[i].path
        const a = document.createElement('a')
        a.href = fileUrl
        a.target = '_blank'
        a.click()
      }
    },
    costChangeB(e) {
      let a = Number(e.target.value)
      a = a.toFixed(2)
      if (a == 'NaN') return (this.form.b = '')
      this.submitBtns()
      this.addform.b = this.form.b
      //获取输入的数据，若不写这行，数据可能输不进去
      this.form.b = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.form.b = this.fmoney(this.form.b)
    },
    // 表单格式转换
    limitInput(value, name) {
      this.addform[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ''
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == '' || s == null || (s == undefined) | isNaN(Number(s))) {
        return s
      }
      s = Number(s) ? Number(s) : s
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2
      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
      var l = s.split('.')[0].split('').reverse()
      var r = s.split('.')[1]
      var t = ''
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '')
      }
      if (n > 0) {
        r = '.' + r
      } else if (n == 0) {
        r = ''
      }
      let returnT = t.split('').reverse().join('') + r
      //负数处理
      if (returnT[0] == '-' && returnT[1] == ',') {
        returnT = '-' + returnT.substring(2)
      }
      return returnT
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = ''
      if (s) {
        str = String(s).replace(/,/g, '')
      }
      if (s && (s + '').indexOf('.') > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, '')
      } else if (s && Number(str)) {
        return str
      } else {
        return s
      }
    },
    // 点击去签署按钮
    async sign() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 1000)
      this.loading = true
      let data = await Contract(this.contract)
      if (data.code == 100) {
        this.loading = false
        this.radio = true
        this.showAgreementVisible = false
        this.hintVisible = true
        this.flowId = data.data.flowId
        this.submitBtns()
      }
    },
    // 签署协议提示确认键
    aaaa() {
      this.radio = true
      this.showAgreementVisible = false
      this.submitBtns()
      this.hintVisible = false
    },
    // 点击勾选协议按钮
    async submitBtn(ruleForm1, ruleForm2, ruleForm3, ruleForm4, ruleForm5, ruleForm6) {
      this.$refs[ruleForm1].validate(valid => {})
      this.$refs[ruleForm2].validate(valid => {})
      this.$refs[ruleForm3].validate(valid => {})
      this.$refs[ruleForm4].validate(valid => {})
      this.$refs[ruleForm5].validate(valid => {})
      this.$refs[ruleForm6].validate(valid => {})
      if (this.radio) return

      let { a, c, d, e, f } = this.form
      let { b } = this.addform
      if (
        a.trim() == '' ||
        b.trim() == '' ||
        c.trim() == '' ||
        d.trim() == '' ||
        e.trim() == '' ||
        f.trim() == '' ||
        this.fileListFront.length == 0 ||
        this.fileListReverse.length == 0
      )
        return this.$Message.error('请上传票面')
      if (!this.btnStatus) return this.$Message.error('请上传附件信息')
      let parameter = {
        productcode: localStorage.getItem('productcode'),
        entname: sessionStorage.getItem('entname')
      }
      this.loading = true
      this.showAgreementVisible = true
      let data = await Contracts(parameter)
      if (data.code == 10000) {
        this.$Message.error('登录已过期，请重新登录')
        this.$router.push('/login')
        sessionStorage.clear()
        return
      }
      if (data.code != 100) {
        this.showAgreementVisible = false
        this.$Message.error('系统异常，请您稍后再试')
        this.loading = false
        return
      }
      this.officertel = data.data.ent.fincerttel
      this.operatetel = data.data.ent.operateTel
      this.contract.entname = data.data.ent.entname
      this.contract.FRaccountid = data.data.ent.fraccountid
      this.contract.inputdate = data.data.ent.inputdate
      this.contract.JBRaccountid = data.data.ent.jbRaccountid
      this.contract.licenseno = data.data.ent.licenseno
      this.contract.mainindname = data.data.ent.mainindname
      this.contract.officer = data.data.ent.operatename
      this.contract.officertel = data.data.ent.fincerttel
      this.contract.ORGaccountid = data.data.ent.qyaccountid
      this.contract.radio = data.data.radio
      this.contract.productcode = localStorage.getItem('productcode')
      data.data.coopeorg
        ? (this.contract.ticketbank = data.data.coopeorg.ticketbank)
        : (this.contract.ticketbank = '')
      data.data.coopeorg
        ? (this.contract.ticketbankno = data.data.coopeorg.ticketaccountno)
        : (this.contract.ticketbankno = '')
      data.data.coopeorg
        ? (this.contract.tickettel = data.data.coopeorg.tickettel)
        : (this.contract.tickettel = '')
      let GetcreateContractReview = await createContractReview(this.contract)
      if (GetcreateContractReview.code == 100) {
        this.contractStatuss = GetcreateContractReview.data.statuss
        if (this.contractStatuss) {
          this.list = GetcreateContractReview.data.data
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        } else {
          this.list = GetcreateContractReview.data.data.file
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        }
      } else {
        this.showAgreementVisible = false
        this.$Message.error('系统异常，请您稍后再试')
      }
      this.submitBtns()
    },

    submitBtns() {
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[0].yszkje == '已上传' && this.fileList[1].yszkje == '已上传') {
          this.btnStatus = true
        }
      }
      if (
        (this.form.a != '') &
        (this.form.b != '') &
        (this.form.c != '') &
        (this.form.d != '') &
        (this.form.e != '') &
        (this.form.f != '') &
        this.radio &
        (this.fileListFront.length != 0) &
        (this.fileListReverse.length != 0) &
        this.btnStatus
      ) {
        this.btn = true
      } else {
        this.btn = false
      }
    },
    // 删除
    handleRemove1(file) {
      this.$refs.pictureUpload1.handleRemove(file)
      this.fileListFront = []
      let i0 = this.fileTypes.findIndex(element => element === 'piaojuz')
      if (i0 == -1) return
      this.fileTypes.splice(i0, 1)
      this.files.splice(i0, 1)
      this.submitBtns()
    },
    handleRemove2(file) {
      this.$refs.pictureUpload2.handleRemove(file)
      this.fileListReverse = []
      let i0 = this.fileTypes.findIndex(element => element === 'piaojuf')
      if (i0 == -1) return
      this.fileTypes.splice(i0, 1)
      this.files.splice(i0, 1)
      this.submitBtns()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    a() {
      this.submitBtns()
    }
  }
}
</script>
<style lang="scss" scoped>
.boxs {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  .bbb {
    font-family: Source Han Sans SC;
    font-size: 0.0885rem;
    font-weight: 400;
    color: #1f1f20;
    margin-right: 0.0417rem;
  }
  .f2 {
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      margin-left: 1.0052rem;
      li {
        width: 100%;
        margin-bottom: 18px;
        height: 0.2604rem;
        display: flex;
        // justify-content: space-between;
        .el-form {
          width: 2.6563rem;
          background-color: #fff;
        }
        .message {
          margin-top: 0.0573rem;
          font-size: 0.0625rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
        .f2_content {
          display: flex;
          margin-top: -41px;
          // 营业执照
          .license1 {
            .aaa11 {
              font-size: 14px;
              font-weight: 700;
              color: #606266;
              width: 130px;
              text-align: right;
              padding: 0px 14px;
            }
          }
        }
      }
    }
  }
  #datatable {
    width: 48vw;
  }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.2604rem;
    margin-top: 0.0781rem;
    cursor: pointer;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.9375rem;
      height: 0.1771rem;
      background: #738bd0;
      border-radius: 0.0208rem;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 0.1563rem;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #3f6ef2;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
  .license {
    margin-left: -0.09rem;
    display: flex;
    justify-content: center;
    margin-bottom: 0.1042rem;
    .permit {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 1.1458rem;
      height: 0.7292rem;
      margin-right: 0.1042rem;
      overflow: hidden;
      cursor: pointer;
    }
    .permit-front {
      background: url(@/assets/shangpiao/组70.png) no-repeat;
      background-size: 100% 100%;
    }
    .permit-reverse {
      background: url(@/assets/shangpiao/组71.png) no-repeat;
      background-size: 100% 100%;
    }
    .card {
      height: 0.6406rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .license-right {
      display: flex;
      flex-direction: column;
      div {
        width: 100%;
        .examine {
          margin-bottom: 0.0521rem;
          height: 0.1042rem;
          color: #738bd0;
          text-decoration: underline;
          cursor: pointer;
        }
        p {
          font-size: 0.0885rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          line-height: 0.125rem;
          margin-bottom: 0.0156rem;
        }
      }
    }
  }
  .span {
    cursor: pointer;
    display: inline-block;
    font-size: 0.0781rem;
    font-family: 'Microsoft YaHei';
    font-weight: 400;
    margin-right: 0.026rem;
    color: #0a7be0;
    border-bottom: 1px solid #0a7be0;
    cursor: pointer;
    margin-right: 0.1042rem;
  }
  .span1 {
    margin-right: 0;
    color: #ff4040;
    border-bottom: 1px solid #ff4040;
  }
  .el-table tr {
    height: 50px;
  }
  .el-table thead {
    height: 50px;
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.1302rem;
    text-align: center;
    margin-top: 0.0781rem;
    user-select: none;
    span {
      font-size: 0.0729rem;
      color: #666;
      margin-left: 0.0365rem;
    }
    img {
      width: 0.0781rem;
      height: 0.0781rem;
      cursor: pointer;
    }
    a {
      cursor: pointer;
      font-size: 0.0729rem;
      color: #738bd0;
    }
  }
  // 弹出框
  .dialog-centers {
    margin: 0 auto;
    width: 90%;
  }
  .dialog-center {
    box-sizing: border-box;
    padding: 0 0.026rem;
    display: flex;
    justify-content: center;
    width: 100%;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      height: 2.8646rem;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      height: 2.7083rem;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      height: 3.4375rem;
    }
    .first {
      display: flex;
      justify-content: center;
      align-items: center;
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        min-width: 3.125rem;
        height: 2.3958rem;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        width: 3.125rem;
        height: 2.3958rem;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        width: 3.9583rem;
        height: 3.0208rem;
      }

      background-color: #fff;

      h1 {
        font-size: 0.0938rem;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 0.6302rem;
      height: 0.1615rem;
      color: #3f6ef2;
      border: 0.0052rem solid #3f6ef2;
      border-radius: 0.0208rem;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
        border: 0px;
      }
    }
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
  .dialog-center-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.1042rem;
    font-size: 0.0885rem;
  }
}
::v-deep .hint .el-dialog {
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 52%;
  }
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 50%;
  }
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 49%;
  }
}
::v-deep .hint .el-dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.026rem 0.1042rem;
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
  }
}

/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 1.6667rem;
  height: 0.2188rem;
  font-size: 0.0781rem;
  border: 0.0052rem solid #e0e0e0;
  border-radius: 0rem;
  padding: 0.0521rem 0.0521rem;
  color: #606266;
  outline: 0;
}
::v-deep .el-form-item__label {
  padding: 0 0.026rem 0 0;
  font-size: 0.0729rem;
}
::v-deep .el-input__prefix {
  left: 1.3802rem;
}
/* 下拉选择器 */
::v-deep .el-input__inner {
  box-sizing: border-box;
  padding: 0 0.0521rem;
  width: 1.6667rem;
  height: 0.2188rem;
  border: 0.0052rem solid #e0dede;
  border-radius: 0.0313rem;
  font-size: 0.0833rem;
}

::v-deep .el-form-item__label {
  font-size: 0.0885rem;
  font-weight: 400;
  color: #1f1f20;
}
::v-deep .abc .el-select {
  width: 1.6667rem;
}
::v-deep .aaaaa .el-icon-date:before {
  content: '';
}

::v-deep .el-input--suffix .el-input__inner {
  padding-left: 0.0521rem;
}
// 面包屑
::v-deep .el-breadcrumb {
  font-size: 0.0833rem;
}
::v-deep .el-breadcrumb__separator {
  margin: 0 0.026rem;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 1.5104rem;
  height: 0.8854rem;
  display: flex;
  margin: 0;
  z-index: 888;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 1.5104rem;
  height: 0.8854rem;
}
::v-deep .el-upload-list__item {
  display: none;
}
::v-deep .el-table {
  font-size: 0.0729rem;
}
</style>
<style lang="scss">
.el-popover {
  min-width: 0.5208rem !important;
}
.el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 160px;
  display: flex;
  margin: 0;
  z-index: 888;
}
.el-upload--picture-card {
  line-height: 0;
}
</style>
